<template>
    <div>
        账号:<input type="text" v-model="loginInfo.account" @focus="err = false"><br>
        密码:<input type="text" v-model="loginInfo.password" @focus="err = false"><span class="text-danger" v-show="err" >密码或账号错误</span><br>
        <button class="btn btn-outline-success" @click="handler">登录</button>
    </div>
</template>

<script setup>
import { reactive, ref} from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const loginInfo = reactive({
    account:'',
    password:'',
})
const err = ref(false)

const handler = e =>{
    if(loginInfo.account ==='admin' && loginInfo.password ==='admin'){
        router.replace({path:'/home'})
        loginInfo.account = ''
        loginInfo.password = ''
    } else {
        err.value = true
        loginInfo.account = ''
        loginInfo.password = ''
    }

}
</script>

<style lang="scss" scoped>

</style>